<template>
  <edit-exam :data="editData" @editFinish="fetchExamInfo" />
  <a-page-header :title="paperInfo.name" :sub-title="paperInfo.caption">
    <template #extra>
      <a-button key="3" @click="handleEditExam">编辑考试</a-button>
      <a-button key="2" @click="fetchExamInfo">刷新页面</a-button>
      <a-button key="1" type="primary" @click="handleEndExam">结束考试</a-button>
    </template>
    <a-skeleton :active="true" :loading="loading">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="试卷ID">{{ paperInfo.id }}</a-descriptions-item>
        <a-descriptions-item label="试卷名称">{{ paperInfo.name }}</a-descriptions-item>
        <a-descriptions-item label="试卷说明">{{ paperInfo.caption }}</a-descriptions-item>
        <a-descriptions-item label="开始时间">{{ examInfo.startTime }}</a-descriptions-item>
        <a-descriptions-item label="考试时长">{{ examInfo.duration }} 秒</a-descriptions-item>
      </a-descriptions>
    </a-skeleton>
  </a-page-header>
  <a-table :dataSource="examStatusList" :columns="columns" rowKey="id" :loading="loading">
    <template #examStatus="{ record }">
      <a-tag color="green" v-if="record.status == 0"> 考试中 </a-tag>
      <a-tag color="red" v-else> 考试结束 </a-tag>
    </template>
    <template #endTime="{ record }"> {{ formatTime(record.end_time) }} </template>
    <template #action="{ record }">
      <a @click="handleSubmitExam(record)">强制交卷</a>
    </template>
  </a-table>
</template>

<script>
import { message, Modal } from "ant-design-vue";
import { createVNode, defineComponent, onMounted, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { adminGetExam, adminGetExamStatus, adminSubmitExam, endExam, getPaperInfo } from "../../utils/api";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import moment from "moment";
import EditExam from "../../components/admin/EditExam.vue";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    let columns = [
      {
        title: "考生学号",
        dataIndex: "stu_number",
      },
      {
        title: "考生姓名",
        dataIndex: "name",
      },
      {
        title: "考试状态",
        dataIndex: "status",
        slots: { customRender: "examStatus" },
      },
      {
        title: "结束时间",
        dataIndex: "end_time",
        slots: { customRender: "endTime" },
      },
      {
        title: "最终成绩",
        dataIndex: "end_score",
      },
      {
        title: "操作",
        slots: { customRender: "action" },
      },
    ];
    const editData = reactive({
      visible: false,
      examId: 0,
    });
    const examStatusList = ref([]);
    const examId = route.params["examId"];
    const loading = ref(true);
    const examInfo = ref({
      startTime: "",
      duration: 1,
    });
    const paperInfo = ref({
      id: 1,
      name: "",
      caption: "",
    });

    const handleEditExam = () => {
      editData.examId = examId;
      editData.visible = true;
    };
    const handleEndExam = () => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "此操作将会将考试开始时间修改为2099年"),
          createVNode("p", {}, `之后考生将无法开始考试,现在正在考试的考生可继续考试`),
        ]),
        onOk() {
          endExam(examId).then((res) => {
            message.success(res.data.message);
            fetchExamInfo();
          });
        },
      });
    };
    const handleSubmitExam = (record) => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "此操作将强制为考生交卷"),
          createVNode("p", {}, `将为姓名为【${record.name}】的考生强制提交试卷，请确认`),
        ]),
        onOk() {
          adminSubmitExam(record.id, examId).then((res) => {
            message.success(res.data.message);
            fetchExamInfo();
          });
        },
      });
    };
    const fetchExamInfo = async () => {
      loading.value = true;
      let result = await adminGetExam(examId);
      if (result.data.code != 200) {
        message.error(result.data.message);
        router.push({ name: "ExamManage" });
      }
      examInfo.value = result.data.data;
      result = await getPaperInfo(result.data.data.paperId);
      paperInfo.value = result.data.data;
      result = await adminGetExamStatus(examId);
      message.info(result.data.message);
      examStatusList.value = result.data.data;
      loading.value = false;
    };
    const formatTime = (text) => {
      return moment(parseInt(text) * 1000).format("YYYY-MM-DD HH:mm:ss");
    };
    onMounted(() => {
      fetchExamInfo();
    });
    return {
      examInfo,
      paperInfo,
      columns,
      examStatusList,
      loading,
      editData,
      formatTime,
      handleSubmitExam,
      fetchExamInfo,
      handleEndExam,
      handleEditExam,
    };
  },
  components: { EditExam },
});
</script>
